<template>
<div class="imgDivlist">
  <div v-if="imgItem.length>0">
    <div class="imgContainer" v-for="(item, index) in imgItem" :key="index" >
      <div class="iconDivDiv">
        <img-collect :isCollect="item.isFavorite" :ids="item.photoWallId" :collectNum="item.favoriteNum"></img-collect>
      </div>
      <div class="goodsitemDiv" @click="bindViewTap(item.photoWallId)">
        <div class="imgDiv"><img :src="item.imgUrl"></div>
      </div>
    </div>
  </div>
  <div v-if="imgItem.length == 0" class="lackRecordtPage">
    <div class="lackRecordTxt">
      <div><img src="/static/images/lack/lackrecord.png"></div>
      <p>暂无照片~</p>
    </div>
  </div>
  <div v-if="isBottom" class="bottomDiv"><img src="/static/images/goods/loading2.png">别拉了，到底啦~</div>
</div>
</template>

<script>
  import imgCollect from './img-collect'
  export default {
    components:{
      imgCollect
    },
    data(){
      return{
        imgItem: [],
        page: 1,//当前页数
        totalPage: 1,//总页数
        isBottom: false,//判断是否到底了
      }
    },
    onShow(){
      this.isBottom = false
      this.page = 1
      this.imgItem = []
      this.getImgList()
    },
    onReachBottom () { //上拉加载
      if(this.totalPage > this.page){
        wx.showLoading({ //数据请求前loading，
          title: '加载中',
        })
        this.page++
        this.getImgList()
      }else{
        this.isBottom = true
      }
    }, 
    //下拉刷新
    onPullDownRefresh(){
      wx.stopPullDownRefresh();//设置下拉弹回去
      this.isBottom = false
      this.page = 1
      this.imgItem = []
      this.getImgList()
    },
    methods: {
      bindViewTap (id) {
        const url = '/pages/img-indetail/main?aid=' + id;
        wx.navigateTo({ url })
      },
      getImgList(){
        this.$http.get(`products/photo?page=${this.page}`).then((res)=>{ 
          this.imgItem = this.imgItem.concat(res.data.data.responses)  //商品详情
          this.totalPage = res.data.data.totalPage
          wx.hideLoading()
        })
      }
    }
  }
</script>

<style scoped>
.imgDivlist{
  background: #efeff4;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
}
.imgContainer{
  width: 100%;
  background: #fff;
  position: relative;
  margin-bottom: 20rpx;
}
.imgDiv{
  height: 560rpx;
}
.imgDiv img,.iconDiv span img{
  width: 100%;
  height: 100%;
  display: block;
}
.imgPrice{
  margin-top: 16rpx;
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgPrice .nowPrice{
  font-size: 32rpx;
  color: #404040;
}
.imgPrice .beforePrice{
  font-size: 26rpx;
  color: #ababab;
  text-decoration:line-through;
  margin-left: 10rpx;
}
.shopNumber{
  font-size: 26rpx;
  color: #404040;
  margin-left: 20rpx;
}
.imgName{
  padding: 0 30rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #000;
  line-height: 54rpx;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; 
  word-break: break-all;
}
.bottomDiv{
  background: #fff;
  width: 100%;
  font-size: 26rpx;
  color: #a09f9f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  padding: 10rpx 0;
  position: relative;
}
.bottomDiv>img{
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}
.lackRecordtPage{
  width: 100%;
  height: 100%;
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackRecordtPage .lackRecordTxt div{
  width: 169rpx;
  height: 169rpx;
  margin: 0 auto;
}
.lackRecordtPage .lackRecordTxt div img{
  width: 100%;
  height: 100%;  
}
.lackRecordtPage .lackRecordTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
</style>